<template>
    <!-- 页面全局配置 -->
    <view class="pageconfig">
        <!--vuetop-->
        <view class="tab1   ">
            <scroll-view scroll-x class="nav" style="background-color:rgba(255,255,255,1)">
                <view class=" flex justify-around ">
                    <view class="cu-item" :class="index==TabCur1?' text-df text-bold cur':''" :style="{'color':index==TabCur1?'#ff4200':''}" v-for="(item,index) in label1List" :key="index" @tap="tabSelect1" :data-id="index">
                        {{item.tabname}}
                    </view>
                </view>
            </scroll-view>
            <swiper :current="TabCur1" duration="300" style="height:100vh;" @change="changeTab1">
                <swiper-item class="tab-content">
                    <scroll-view style="height:100vh;" class="list-scroll-content" scroll-y>
                        <view class="flex3    flex  justify-center  " style="flex-direction: column;align-content: center;align-items: center;">
							
							
                            <view class="flex4  bg-white   flex  justify-center  " style="flex-direction: column;align-content: center;align-items: center;">
                                <view class="flex5   response  flex  justify-between  " style="flex-direction: row;align-items: center;">
                                    <text> 订单号：565565656565655775</text>
                                    <text class="text7 "> 待发送</text>
                                </view>
                                <view class="flex8   response  flex  justify-start  " style="flex-direction: column;">
                                    <text> 收件人：都是多人啊发发发</text>
                                    <text> 内容：是大V速度</text>
                                    <text> 发送时间：2020-01-14 12:23:34</text>
                                    <text> 收到时间：2020-01-14 12:23:34</text>
                                </view>
                                <view class="flex13   response  flex  justify-between  " style="flex-direction: row;align-items: center;">
                                    <view class="flex14    flex  justify-start  ">
                                        <text> 短信费用:</text>
                                        <text> ￥1.5</text>
                                    </view>
                                    <view class="flex17    flex  justify-center  " style="flex-direction: row;align-content: center;align-items: stretch;">
                                        <button class=" radius cu-btn radius lines-gray "> 查看详情</button>
                                    </view>
                                </view>
                            </view>
							
                            <view class="flex19  bg-white   flex  justify-center  " style="flex-direction: column;align-content: center;align-items: center;">
                                <view class="flex20   response  flex  justify-between  " style="flex-direction: row;align-items: center;">
                                    <text> 订单号：565565656565655775</text>
                                    <text class="text22 "> 待发送</text>
                                </view>
                                <view class="flex23   response  flex  justify-start  " style="flex-direction: column;">
                                    <text> 收件人：都是多人啊发发发</text>
                                    <text> 内容：是大V速度</text>
                                    <text> 发送时间：2020-01-14 12:23:34</text>
                                    <text> 收到时间：2020-01-14 12:23:34</text>
                                </view>
                                <view class="flex28   response  flex  justify-between  " style="flex-direction: row;align-items: center;">
                                    <view class="flex29    flex  justify-start  ">
                                        <text> 短信费用:</text>
                                        <text> ￥1.5</text>
                                    </view>
                                    <view class="flex32    flex  justify-center  " style="flex-direction: row;align-content: center;align-items: stretch;">
                                        <button class=" radius cu-btn radius lines-gray "> 查看详情</button>
                                    </view>
                                </view>
                            </view>
                            <view class="flex34  bg-white   flex  justify-center  " style="flex-direction: column;align-content: center;align-items: center;">
                                <view class="flex35   response  flex  justify-between  " style="flex-direction: row;align-items: center;">
                                    <text> 订单号：565565656565655775</text>
                                    <text class="text37 "> 待发送</text>
                                </view>
                                <view class="flex38   response  flex  justify-start  " style="flex-direction: column;">
                                    <text> 收件人：都是多人啊发发发</text>
                                    <text> 内容：是大V速度</text>
                                    <text> 发送时间：2020-01-14 12:23:34</text>
                                    <text> 收到时间：2020-01-14 12:23:34</text>
                                </view>
                                <view class="flex43   response  flex  justify-between  " style="flex-direction: row;align-items: center;">
                                    <view class="flex44    flex  justify-start  ">
                                        <text> 短信费用:</text>
                                        <text> ￥1.5</text>
                                    </view>
                                    <view class="flex47    flex  justify-center  " style="flex-direction: row;align-content: center;align-items: stretch;">
                                        <button class=" radius cu-btn radius lines-gray "> 查看详情</button>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </swiper-item>
                <swiper-item class="tab-content">
                    <scroll-view style="height:800rpx;" class="list-scroll-content" scroll-y>
                    </scroll-view>
                </swiper-item>
                <swiper-item class="tab-content">
                    <scroll-view style="height:800rpx;" class="list-scroll-content" scroll-y>
                    </scroll-view>
                </swiper-item>
                <swiper-item class="tab-content">
                    <scroll-view style="height:800rpx;" class="list-scroll-content" scroll-y>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>

        <!--vuebottom-->
    </view>
</template>

<script>
    import Vue from 'vue'
    export default {
        data() {
            return {
                TabCur1: 0,
                /**single**/
                TabCur1: 0,
                /**single**/

                label1List: [{
                    "id": 2,
                    "expand": true,
                    "name": "选项卡容器一",
                    "tabname": "全部",
                    "iconname": "",
                    "value": "1",
                    "config": {
                        "diyclass": "",
                        "diycontent": "",
                        "label": "标签1"
                    },
                    "label": "选项卡容器一(ID:2)"
                }, {
                    "id": 49,
                    "expand": true,
                    "name": "选项卡容器二",
                    "tabname": "待发送",
                    "iconname": "",
                    "value": "2",
                    "list": [],
                    "config": {
                        "diyclass": "",
                        "diycontent": "",
                        "label": "标签1"
                    },
                    "label": "选项卡容器二(ID:49)",
                    "children": []
                }, {
                    "id": 50,
                    "expand": true,
                    "name": "选项卡容器三",
                    "tabname": "已发送",
                    "iconname": "",
                    "value": "3",
                    "list": [],
                    "config": {
                        "diyclass": "",
                        "diycontent": "",
                        "label": "标签1"
                    },
                    "label": "选项卡容器三(ID:50)",
                    "children": []
                }, {
                    "id": 51,
                    "expand": true,
                    "name": "选项卡容器三",
                    "tabname": "发送失败",
                    "iconname": "",
                    "value": "3",
                    "list": [],
                    "config": {
                        "diyclass": "",
                        "diycontent": "",
                        "label": "标签1"
                    },
                    "label": "选项卡容器三(ID:51)",
                    "children": []
                }],
                /**vuejs**/


            };
        },
        onLoad() {


        },
        methods: {


            /**
             *          $vuetag = "";
             *          $vuecss = "";
             *          $vuejs = "";
             *
             */

            tabSelect1(e) {
                this.TabCur1 = e.currentTarget.dataset.id;
            },
            changeTab1(e) {
                this.TabCur1 = e.target.current;
            },
            //获取数据

        }
    }
</script>

<style lang="less">
    /**
 *
 此处必须引用colorui样式,并放入根目录，css样式可以这样写
	@import "colorui/main.css";
	@import "colorui/icon.css";

 如需要引用colorui到全局，
 需要在App.vue 引入
 	@import "colorui/main.css";
	@import "colorui/icon.css";
 *
 */




    /**本页全局配置的代码**/
    .pageconfig {
        width: 100%;
        overflow: hidden;
        overflow-y: scroll;
        background-color: rgba(247, 252, 253, 1);
        height: 100vh;
    }



    /**pagedomcss**/


    .flex3 {
        width: 92%;
        width: calc(92% - 60rpx);
        margin-top: 10rpx;
        margin-bottom: 10rpx;
        margin-left: 30rpx;
        margin-right: 30rpx;
    }

    .flex4 {
        width: 95%;
        width: calc(95% - 40rpx);
        margin-top: 20rpx;
        margin-bottom: 40rpx;
        margin-left: 20rpx;
        margin-right: 20rpx;
        padding-top: 20rpx;
        padding-bottom: 20rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
        border-bottom-left-radius: 40rpx;
    }

    .flex5 {
        width: 100%;
    }

    .text7 {
        color: rgba(255, 112, 162, 1);
    }

    .flex8 {
        width: 100%;
    }

    .flex13 {
        width: 100%;
    }

    .flex14 {
        width: 27%;
    }

    .flex17 {
        width: 37%;
    }

    .flex19 {
        width: 95%;
        width: calc(95% - 40rpx);
        margin-top: 20rpx;
        margin-bottom: 40rpx;
        margin-left: 20rpx;
        margin-right: 20rpx;
        padding-top: 20rpx;
        padding-bottom: 20rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
        border-bottom-left-radius: 40rpx;
    }

    .flex20 {
        width: 100%;
    }

    .text22 {
        color: rgba(255, 112, 162, 1);
    }

    .flex23 {
        width: 100%;
    }

    .flex28 {
        width: 100%;
    }

    .flex29 {
        width: 27%;
    }

    .flex32 {
        width: 37%;
    }

    .flex34 {
        width: 95%;
        width: calc(95% - 40rpx);
        margin-top: 20rpx;
        margin-bottom: 40rpx;
        margin-left: 20rpx;
        margin-right: 20rpx;
        padding-top: 20rpx;
        padding-bottom: 20rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
        border-bottom-left-radius: 40rpx;
    }

    .flex35 {
        width: 100%;
    }

    .text37 {
        color: rgba(255, 112, 162, 1);
    }

    .flex38 {
        width: 100%;
    }

    .flex43 {
        width: 100%;
    }

    .flex44 {
        width: 27%;
    }

    .flex47 {
        width: 37%;
    }

    .VerticalNav.nav {
        width: 180upx;
        white-space: initial;
    }

    .VerticalNav.nav .cu-item {
        width: 100%;
        text-align: center;
        margin: 0;
        border: none;
        height: 50px;
        position: relative;
    }

    .VerticalNav.nav .cu-item.cur::after {
        content: "";
        width: 8upx;
        height: 70upx;
        position: absolute;
        background-color: currentColor;
        top: 0;
        left: 0upx;
        bottom: 0;
        margin: auto;
    }

    .VerticalBox {
        display: flex;
    }

    .tab1 {}
</style>